<!DOCTYPE html>

<!--thymeleaf-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>shiro tool html</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>


<body>

<div id="app">
    <!--登录框-->
    <div class="main" v-show="isLogin">
        <div class="title">
            <span>密码登录</span>
        </div>
        <div class="title-msg">
            <span>请输入登录账户和密码</span>
        </div>
        <form name="formData" class="login-form" method="post" novalidate>     <!-- th:action="@{/admin/login}"-->
            <!--输入框-->
            <div class="input-content">
                <div style="margin-top: 16px">
                    <el-input id="username" type="text" v-model="username" clearable
                              autocomplete="off" placeholder="账户" required maxlength="32">
                    </el-input>
                </div>
                <div style="margin-top: 16px; width: 100%">
                    <el-input id="password" type="password" v-model="password" show-password clearable
                              autocomplete="off" placeholder="密码" required maxlength="32">
                    </el-input>
                </div>
            </div>
            <!--登入按钮-->
            <div style="text-align: center">
                <!--<button type="submit" class="enter-btn">登录</button>-->
                <button type="button" class="enter-btn" onclick="login()">登录</button>
            </div>
            <div class="foor">
                <div class="left"><span>忘记密码 ?</span></div>
                <div class="right" @click="isLogin = !isLogin"><span>立即注册</span></div>
            </div>
        </form>
    </div>
    <!--注册框-->
    <div class="main" v-show="!isLogin">
        <div class="title">
            <span>注册</span>
        </div>
        <div class="title-msg">
            <span>请输入注册账号和密码</span>
        </div>
        <form name="formDataRegister" class="login-form" method="post" novalidate>     <!-- th:action="@{/admin/login}"-->
            <!--输入框-->
            <div class="input-content">
                <div style="margin-top: 16px">
                    <el-input id="register_username" type="text" v-model="register_username" clearable
                              autocomplete="off" placeholder="账户" required maxlength="32">
                    </el-input>
                </div>
                <div style="margin-top: 16px; width: 100%">
                    <el-input id="register_password" type="password" v-model="register_password" show-password clearable
                              autocomplete="off" placeholder="密码" required maxlength="32">
                    </el-input>
                </div>
            </div>
            <!--注册按钮-->
            <div style="text-align: center">
                <!--<button type="submit" class="enter-btn">登录</button>-->
                <button type="button" class="enter-btn" @click="register()">注册</button>
            </div>
            <div class="foor">
                <div class="left" @click="isLogin = !isLogin"><span>立即登录</span></div>
            </div>
        </form>
    </div>
</div>

</body>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 登录用户名
                username: '',
                // 登录密码
                password: '',
                // 注册用户名
                register_username: '',
                // 注册密码
                register_password: '',
                // 是否为登录(true: 登录       false: 注册)
                isLogin: true
            }
        },
        created() {

        },
        methods: {
            register() {
                const that = this
                $.ajax({
                    url: "/admin/register",
                    type: 'post',
                    data: {
                        "username": formDataRegister.register_username.value,
                        "password": formDataRegister.register_password.value
                    },
                    async: true,
                    success: function (data) {
                        if (data) {
                            that.$message({
                                message: '注册成功,请登录',
                                type: 'success',
                                center: true,
                                showClose: true,
                                duration: 2000
                            })
                        }else {
                            that.$message({
                                message: '注册失败,该用户名已存在',
                                type: 'warning',
                                center: true,
                                showClose: true,
                                duration: 2000
                            })
                        }
                    },
                    error: function () {
                        this.$message({
                            message: '注册失败,请重试',
                            type: 'warning',
                            center: true,
                            showClose: true,
                            duration: 2000
                        })
                    },
                })
            }
        }
    })

    // 登录
    function login() {
        $.ajax({
            url: "/admin/login",
            type: 'post',
            data: {
                "username": formData.username.value,
                "password": formData.password.value
            },
            async: true,
            success: function (data) {
                window.location.href = data;
            },
            error: function () {
                console.log("登陆失败")
            },
        })
    };

    // 注册
    // function
</script>

</html>


<style>
    body{
        background: #353f42;
    }

    *{
        padding: 0;
        margin: 0;
    }

    .main {
        margin: 0 auto;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 15px;
        width: 350px;
        height: 350px;
        background: #FFFFFF;
        /*以下css用于让登录表单垂直居中在界面,可删除*/
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -170px;
        margin-left: -175px;
    }

    .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
    }

    .title span {
        font-size: 18px;
        color: #353f42;
    }

    .title-msg {
        width: 100%;
        height: 64px;
        line-height: 64px;
    }

    .title:hover{
        cursor: default	;
    }

    .title-msg:hover{
        cursor: default	;
    }

    .title-msg span {
        font-size: 12px;
        color: #707472;
    }

    .input-content {
        width: 100%;
        height: 120px;
    }

    .input-content input {
        width: 100%;
        height: 40px;
        border: 1px solid #dad9d6;
        background: #ffffff;
        padding-left: 10px;
        padding-right: 10px;
    }

    .enter-btn {
        width: 350px;
        height: 40px;
        color: #fff;
        background: #0bc5de;
        line-height: 40px;
        text-align: center;
        border: 0px;
    }

    .foor{
        width: 100%;
        height: auto;
        color: #9b9c98;
        font-size: 12px;
        margin-top: 20px;
    }

    .enter-btn:hover {
        cursor:pointer;
        background: #1db5c9;
    }

    .foor div:hover {
        cursor:pointer;
        color: #484847;
        font-weight: 600;
    }

    .left{
        float: left;
    }
    .right{
        float: right;
    }

</style>
